<template>
  <div class="Statisticsadmin">
    <div class="Statisticsadmin-one">
      <div>
        <div>{{ detail.allocation_number }}</div>
        <div :style="{
          background:
            detail.status == 0
              ? '#E6A23C'
              : detail.status == 1
                ? '#67C23A'
                : detail.status == 2
                  ? '#F56C6C'
                  : detail.status == 3
                    ? '#909399'
                    : '',
        }">
          {{ detail.status | statusTitle }}
        </div>
        <!-- <div
          :style="{
            color:
              detail.is_return == 1
                ? '#E6A23C'
                : detail.is_return == 2
                ? '#67C23A'
                : '',
            borderColor:
              detail.is_return == 1
                ? '#E6A23C'
                : detail.is_return == 2
                ? '#67C23A'
                : '#333333',
          }"
        >
          {{ detail.is_return | is_returnTitle }}
        </div> -->
      </div>
      <div>
        <div>
          <span style="color: #2c70d6">赠送</span>
          /
          <span :style="{
            color:
              detail.data_status == 0
                ? '#67C23A'
                : detail.data_status == 1
                  ? '#F56C6C'
                  : '',
          }">
            {{ detail.data_status | datastatusTitle }}</span>
        </div>
        <div>
          计划赠送数量/实际赠送数量：<span style="font-weight: 600">{{
            detail.jh_jc_num
          }}</span>/<span style="font-weight: 600; color: red">{{
  detail.sj_jc_num || 0
}}</span>
        </div>
        <div>申请事由：{{ detail.reason || "-" }}</div>
      </div>
      <div>
        <div>
          <div>邮</div>
          <div>
            运输方式：{{ detail.transport_type || "-" }}
            <span style="margin-left: 10px" v-if="detail.courier_number">快递单号：{{ detail.courier_number }}</span>
          </div>
        </div>
        <div>
          <span>{{
            detail.wp_province +
            detail.wp_city +
            detail.wp_area +
            detail.wp_address
          }}</span>
          <span>
            {{ detail.wp_user }}
          </span>
          <span>
            {{ detail.wp_phone }}
          </span>
        </div>
        <div>
          <div>备</div>
          <div>{{ detail.remark || "-" }}</div>
        </div>
      </div>
    </div>
    <div class="Statisticsadmin-two">
      <div class="line Statisticsadmin-two-title">赠送列表</div>
      <div style="margin: 10px 0">
        <el-button :disabled="!multipleSelection.length || detail.status == 2 || detail.status == 3"  type="primary" size="mini" @click="dialogVisible = true">赠送转归还</el-button>
        <!-- <el-button
          type="primary"
          size="mini"
          :disabled="detail.data_return == 1"
          >未归还转内购</el-button
        >
        <el-button
          type="warning"
          size="mini"
          @click="postAdminOmssetAllocationtcclose"
          :disabled="detail.data_return == 1"
          >关闭借出计划</el-button
        > -->
      </div>

      <el-table :data="list" border style="width: 100%" size="mini">
        <el-table-column width="55">
          <template slot-scope="{ row }">
            <el-checkbox v-model="row.checked" @change="onChecked($event, row)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="type_name" label="商品信息" width="400">
          <template slot-scope="{ row }">
            <div class="goodsInfo">
              <el-image :src="row.img" fit="contain" :lazy="true"></el-image>
              <div>
                <div>{{ row.type_name }}</div>
                <div>{{ row.sku_code }}</div>
                <div>{{ row.type_no }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="jh_jc_num" label="计划赠送/实际赠送数量">
          <template slot-scope="{ row }">
            <div style="font-size: 18px">
              <span>{{ row.jh_jc_num || 0 }}</span> /
              <span style="color: red"> {{ row.sj_jc_num || 0 }} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sj_gh_num" label="已归还数量">
          <template slot-scope="{ row }">
            <div style="font-size: 18px">{{ row.sj_gh_num }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="计划归还数量">
          <template scope="{ row }">
            <el-input v-model="row.num" placeholder="请输入计划归还数量" size="mini" type="number" clearable></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Statisticsadmin-two">
      <div class="line Statisticsadmin-two-title">归还列表</div>
      <div style="margin: 10px 0">
        <el-radio-group v-model="radio" size="mini" @input="onInputRadio">
          <el-radio-button label="归还"></el-radio-button>
          <!-- <el-radio-button label="转内购"></el-radio-button> -->
        </el-radio-group>
      </div>
      <div v-if="radio == '归还'">
        <el-form ref="form" :model="form" label-position="top" class="myform" size="mini">
          <div>
            <el-form-item label="归还单号" class="myform-item">
              <el-input v-model="form.number" placeholder="请输入归还单号" @keyup.enter.native="onSearch" clearable></el-input>
            </el-form-item>
            <el-form-item label="归还审批状态" class="myform-item">
              <el-select v-model="form.status" placeholder="请选择" clearable>
                <el-option v-for="item in optionsSP" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="归还发起时间" class="myform-item">
              <el-date-picker v-model="form.str_time" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item style="margin-top: 38px">
              <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
          </div>
          <div></div>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" size="mini">
          <el-table-column prop="allocation_number" label="归还单号">
          </el-table-column>
          <el-table-column prop="type_name" label="商品信息" width="400">
            <template slot-scope="{ row }">
              <div class="goodsInfo">
                <el-image :src="row.img" fit="contain" :lazy="true"></el-image>
                <div>
                  <div>{{ row.type_name }}</div>
                  <div>{{ row.sku_code }}</div>
                  <div>{{ row.type_no }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="计划归还数量"> </el-table-column>
          <el-table-column prop="createtime" label="归还发起时间">
          </el-table-column>
          <el-table-column prop="status" label="归还审核状态">
            <template slot-scope="{ row }">
              <div :style="{
                color:
                  row.status == 0
                    ? '#E6A23C'
                    : row.status == 1
                      ? '#67C23A'
                      : row.status == 2
                        ? '#F56C6C'
                        : row.status == 3
                          ? '#909399'
                          : '',
              }">
                {{
                  row.status == 0
                  ? "审核中"
                  : row.status == 1
                    ? "已通过"
                    : row.status == 2
                      ? "已拒绝"
                      : row.status == 3
                        ? "已撤销"
                        : ""
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="归还确认" :visible.sync="dialogVisible" width="1600px">
      <div>
        <div>
          <div class="line" style="font-weight: 600; margin-bottom: 10px">
            已选信息
          </div>
          <el-table :data="multipleSelection" border style="width: 100%" size="mini">
            <el-table-column prop="type_name" label="商品信息" width="400">
              <template slot-scope="{ row }">
                <div class="goodsInfo">
                  <el-image :src="row.img" fit="contain" :lazy="true"></el-image>
                  <div>
                    <div>{{ row.type_name }}</div>
                    <div>{{ row.sku_code }}</div>
                    <div>{{ row.type_no }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="jh_jc_num" label="计划赠送/实际赠送数量">
              <template slot-scope="{ row }">
                {{ row.jh_jc_num || 0 }} / {{ row.sj_jc_num || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="sj_gh_num" label="已归还数量">
            </el-table-column>
            <!-- <el-table-column prop="address" label="已转内购数">
            </el-table-column> -->
            <el-table-column prop="num" label="计划归还数量">
              <template scope="{ row }">
                <el-input v-model="row.num" placeholder="请输入计划归还数量" size="mini" type="number" clearable></el-input>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div>统计：计划归还共<span>15</span>件</div> -->
        </div>
        <div>
          <div class="line" style="font-weight: 600; margin: 10px 0">
            邮寄信息
          </div>
          <div class="content">
            <div class="content-one">
              <div>
                <div class="star" style="margin-bottom: 10px">快递单号:</div>
                <el-input v-model="formGh.ourier_number" placeholder="请输入快递单号" size="mini" clearable></el-input>
              </div>
              <div>
                <div class="star" style="margin-bottom: 10px">运输方式:</div>
                <el-select v-model="formGh.logistics_company_code" placeholder="请选择" size="mini" @change="handleChange">
                  <el-option v-for="item in Courier" :key="item.logistics_company_name"
                    :label="item.logistics_company_name" :value="item.logistics_company_code">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="content-two">
              <div>
                <div class="star">联系人</div>
                <el-input readonly v-model="formGh.wp_user" placeholder="请输入联系人" size="mini" clearable></el-input>
              </div>
              <div>
                <div class="star">联系电话</div>
                <el-input readonly v-model="formGh.wp_phone" placeholder="请输入联系电话" size="mini" clearable></el-input>
              </div>
              <div>
                <div class="star">邮寄地址</div>
                <div>
                  <el-input style="width: 400px" readonly v-model="formGh.wp_address" placeholder="请输入邮寄地址" size="mini"
                    clearable></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="" style="margin-bottom: 10px">备注</div>
              <el-input type="textarea" v-model="formGh.remark" placeholder="请输入备注" size="mini" clearable></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" :disabled="!formGh.ourier_number || !formGh.transport_type"
          @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/pagination.vue";
import {
  postAdminOmsgetAllocationtdetail,
  postAdminOmsgetlogisticsCompanyCode,
  postAdminOmsSetAllocation,
  postAdminOmsgetWarehouseaddress,
  postAdminOmssetAllocationtcclose,
  postAdminOmsgetWarehousereturn,
  postAdminOmsSetAllocation_transfer
} from "@/api";
import { regionData } from "element-china-area-data";
export default {
  components: { pagination },
  filters: {
    groupsTitle(e) {
      if (e == 1) return "赠送";
      if (e == 2) return "借出";
      if (e == 3) return "归还";
      return e;
    },
    statusTitle(e) {
      if (e == 0) return "审核中";
      if (e == 1) return "已通过";
      if (e == 2) return "已拒绝";
      if (e == 3) return "已撤销";
      return e;
    },
    is_returnTitle(e) {
      if (e == 0) return "未归还";
      if (e == 1) return "部分归还";
      if (e == 2) return "全部归还";
      return e;
    },
    datastatusTitle(e) {
      if (e == 0) return "正常";
      if (e == 1) return "关闭";
      return e;
    },
  },
  data() {
    return {
      dialogVisible: false,
      address: regionData,
      radio: "归还",
      form: {
        allocation_number: "",
        number: "",
        str_time: "",
        end_time: "",
        status: "",
      },
      optionsSP: [
        {
          value: "0",
          label: "审核中",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "2",
          label: "已拒绝",
        },
        {
          value: "3",
          label: "已撤销",
        },
      ],
      detail: "",
      list: [],
      multipleSelection: [],
      tableData: [],
      total: 0,
      Courier: [],
      formGh: {
        groups: 3,
        transport_type: "",
        allocation_number: "",
        logistics_company_code: "",
        wp_user: "",
        wp_phone: "",
        wp_province: "",
        wp_city: "",
        wp_area: "",
        wp_address: "",
        remark: "",
        reason: "归还所借商品",
        ourier_number: "",
      },
    };
  },
  activated() {
    let allocation_number = this.$route.query.allocation_number;
    let data = {
      allocation_number,
    };
    this.formGh.allocation_number = allocation_number;
    this.form.allocation_number = allocation_number;
    this.postAdminOmsgetAllocationtdetail(data);
    this.postAdminOmsgetWarehousereturn(this.form);
    this.postAdminOmsgetlogisticsCompanyCode();
    this.postAdminOmsgetWarehouseaddress();
  },
  methods: {
    // 归还列表
    async postAdminOmsgetWarehousereturn(data) {
      this.form = data;
      let form = JSON.parse(JSON.stringify(this.form));
      if (form.str_time) {
        form.str_time = `${data.str_time[0]}`;
        form.end_time = `${data.str_time[1]}`;
      } else {
        form.str_time = "";
        form.end_time = "";
      }
      let res = await postAdminOmsgetWarehousereturn(form);
      this.tableData = res.data;
    },
    // 关闭
    async postAdminOmssetAllocationtcclose() {
      let { detail } = this;
      let obj = {
        allocation_number: detail.allocation_number,
      };
      this.$confirm("确定关闭借出计划?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await postAdminOmssetAllocationtcclose(obj);
          this.postAdminOmsgetAllocationtdetail(obj);
        })
        .catch(() => { });
    },
    async postAdminOmsgetWarehouseaddress() {
      let res = await postAdminOmsgetWarehouseaddress();
      let data = res.data;
      this.formGh.wp_user = data.part_a_receive;
      this.formGh.wp_phone = data.part_a_receive_tel;
      this.formGh.wp_address = data.part_a_place;
    },
    async onSubmit() {
      this.loading = true;
      let allocation_number = this.$route.query.allocation_number;
      let { multipleSelection, formGh, detail } = this;
      if(!/^[A-Za-z0-9]+$/.test(formGh.ourier_number)){
          this.$message.warning("请正确填写快递单号(限制 1 个)");return;
      }

      let arr = [];
      let is = multipleSelection.some((e) => {
        return (
          Number(e.sj_jc_num) - Number(e.sj_gh_num) - Number(e.num) < 0 ||
          !e.num
        );
      });
      if (is) {
        this.loading = false;
        this.$message.warning("归还数量不能大于实际数量且不能等于0");
      } else {
        for (let index = 0; index < multipleSelection.length; index++) {
          let obj = {
            id: multipleSelection[index].id,
            sku_code: multipleSelection[index].sku_code,
            num: multipleSelection[index].num,
          };
          arr.push(obj);
        }
        formGh.allocation_number=allocation_number
        formGh.arrlist = arr;
        formGh.remark = formGh.remark.replace(/\r|\n/gi, "");
        formGh.reason = formGh.reason.replace(/\r|\n/gi, "");
        try {
          let res = await postAdminOmsSetAllocation_transfer(formGh);
          this.$message.success("提交成功");
          let formGhL = {
            groups: 3,
            transport_type: "",
            allocation_number: "",
            logistics_company_code: "",
            remark: "",
            reason: "归还所赠商品",
            ourier_number: "",
          };
          let formGhobj = { ...this.formGh, ...formGhL };
          this.formGh = formGhobj;
          this.multipleSelection = [];
          let data = {
            allocation_number: detail.allocation_number,
          };
          this.postAdminOmsgetAllocationtdetail(data);
          this.postAdminOmsgetWarehousereturn(this.form);
          this.dialogVisible = false;
          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      }
    },
    handleChange(val) {
      console.log("value", val);
      this.formGh.transport_type = this.Courier.find(
        (item) => item.logistics_company_code == val
      ).logistics_company_name;
    },
    onChecked(val, row) {
      let { list } = this;
      let multipleSelection = list.filter((e) => e.checked);
      this.multipleSelection = JSON.parse(JSON.stringify(multipleSelection));
    },
    async postAdminOmsgetlogisticsCompanyCode() {
      let res = await postAdminOmsgetlogisticsCompanyCode();
      this.Courier = res.data;
    },
    async postAdminOmsgetAllocationtdetail(data) {
      let res = await postAdminOmsgetAllocationtdetail(data);
      let list = res.data.list;
      list = list.map((e) => {
        e.num = "";
        e.checked = false;
        return e;
      });
      this.list = list;
      this.detail = res.data.detail;
    },
    onSearch() {
      let { form, radio } = this;
      if (radio == "转内购") {
        this.postAdminOmsGetWarehouseTransfer(form);
      } else {
        this.postAdminOmsgetWarehousereturn(form);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsInfo {
  display: flex;

  >.el-image {
    width: 80px;
    height: 80px;
  }

  >div:nth-child(2) {
    width: 280px;
    margin-left: 10px;

    >div:nth-child(1) {
      font-weight: 600;
      font-size: 14px;
    }

    >div:nth-child(2) {
      font-size: 14px;
    }

    >div:nth-child(3) {
      color: #999;
      font-size: 14px;
    }
  }
}

.content {
  .content-one {
    display: flex;
    align-items: center;

    >div {
      margin-right: 10px;
    }
  }

  .content-two {
    display: flex;
    margin-top: 10px;

    >div {
      margin-right: 10px;

      >div {
        display: flex;
        margin-bottom: 10px;
      }
    }
  }
}

.myform {
  display: flex;
  justify-content: space-between;

  >div {
    display: flex;
  }

  &-item {
    margin-right: 10px;
  }
}

.Statisticsadmin {
  font-size: 12px;

  .Statisticsadmin-one {
    padding: 25px;
    background: #fff;

    >div:nth-child(1) {
      display: flex;

      >div:nth-child(1) {
        font-weight: 600;
        font-size: 18px;
      }

      >div:nth-child(2) {
        color: #fff;
        border-radius: 4px;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        margin: 0 10px;
      }

      >div:nth-child(3) {
        border-radius: 4px;
        height: 22px;
        line-height: 22px;
        border-style: solid;
        border-width: 1px;
        padding: 0 10px;
      }
    }

    >div:nth-child(2) {
      margin-top: 15px;
      font-size: 14px;
      display: flex;

      >div:not(:nth-last-child(1)) {
        border-right: 1px solid #ddd;
      }

      >div:not(:nth-child(1)) {
        padding: 0 20px;
      }

      >div:nth-child(1) {
        padding-right: 20px;
      }
    }

    >div:nth-child(3) {
      margin-top: 15px;
      font-size: 12px;
      display: flex;
      align-items: center;

      >div:not(:nth-last-child(1)) {
        border-right: 1px solid #ddd;
      }

      >div:not(:nth-child(1)) {
        padding: 0 20px;
      }

      >div:nth-child(1) {
        padding-right: 20px;
        display: flex;
        align-items: center;

        >div:nth-child(1) {
          border: 1px solid #2c70d6;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          color: #2c70d6;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          margin-right: 10px;
        }
      }

      >div:nth-child(2) {
        color: #999;
      }

      >div:nth-child(3) {
        display: flex;
        align-items: center;
        color: #999;

        >div:nth-child(1) {
          border: 1px solid #2c70d6;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          color: #2c70d6;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          margin-right: 10px;
        }
      }
    }
  }

  .Statisticsadmin-two {
    margin-top: 10px;
    padding: 25px;
    background: #fff;

    .Statisticsadmin-two-title {
      font-size: 14px;
      font-weight: 600;
    }
  }
}
</style>
